<template>
    <TemplateTitle titleName="各厂水量目标完成情况"></TemplateTitle>
    <div class="chartContian">
        <div class="total">
            <div style="width: 12%"></div>
            <div class="precent">
                <chart-precent
                    :chartData="chartTotalDataList"
                    ref="chartPrecent"
                ></chart-precent>
            </div>
        </div>
        <chart-completion-status
            :chartData="chartDataList"
            xAxisName="name"
            :option="option"
            :chartType="chartType"
            :currentColorList="currentColorList"
            :seriesDataList="seriesDataList"
            :chartMax="chartMax"
            :twoYAxis="false"
            :unit="unit"
            :orient="'horizontal'"
            ref="chartCompletionStatus"
        ></chart-completion-status>
        <div class="xlabelName">
            <div
                class="labelItem"
                v-for="item in chartDataNameList"
                :key="item"
                :style="{ width: 100 / chartDataNameList.length + '%' }"
            >
                <span>目标</span>
                <span>{{ item }}</span>
            </div>
        </div>
        <div class="legend">
            <p
                v-for="(item, index) in legendList"
                :key="index"
            >
                <span :style="{ background: currentColorList[index] }"></span><a>{{ item }}</a>
            </p>
        </div>
    </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";

import homeHttp from "@/https/home.js";
import moment from "moment";
import { inject, nextTick, onMounted, ref, watch } from "vue";
import ChartCompletionStatus from "./charts/ChartCompletionStatus.vue";
import ChartPrecent from "./charts/ChartPrecent.vue";
const legendList = ref([]);
const currentColorList = ref([]);
const seriesDataList = ref([]);
const colorList = ref([
    "#63b2ee",
    "#76da91",
    "#f8cb7f",
    "#f89588",
    "#7cd6cf",
    "#7898e1",
    "#efa666",
    "#eddd86",
    "#9987ce",
    "#63b2ee",
    "#76da91",
    "#9192ab",
]);
const chartDataList = ref([]);
const chartDataNameList = ref(["星沙厂", "城北厂", "城南厂", "城西厂"]);
const chartTotalDataList = ref([]);
const option = ref({});
const chartType = ref([]);
const chartMax = ref(0);
const unit = ref(["单位:万吨"]);
const chartCompletionStatus = ref(null);

onMounted(() => {
    querywaterTargetCompletion(moment().format("YYYY"));
    queryTotal(moment().format("YYYY"));
});

const year = inject("currentDataYear");
watch(year, (val) => {
    console.log(val, "val");
    queryTotal(val);
    querywaterTargetCompletion(val);
});
const chartPrecent = ref(null);
const queryTotal = (year) => {
    let params = {
        year: year,
    };
    homeHttp.queryTotal(params).then((res) => {
        if (res.data.code == 200) {
            chartTotalDataList.value = []
            console.log('hhhhhahahahahahhahahahha', res.data.data);
            chartTotalDataList.value.push(res.data.data["星沙"]);
            chartTotalDataList.value.push(res.data.data["城北"]);
            chartTotalDataList.value.push(res.data.data["城南"]);
            chartTotalDataList.value.push(res.data.data["城西"]);
            // for (let key in res.data.data) {
            //     chartTotalDataList.value.push(res.data.data[key]);
            // }
            nextTick(() => {
                chartPrecent.value.getChartData();
            });
        }
    });
};
const querywaterTargetCompletion = (year) => {
    let params = {
        year: year,
    };
    homeHttp.querywaterTargetCompletion(params).then((res) => {
        if (res.data.code == 200 && Object.keys(res.data.data).length != 0) {
            // let list = [];
            // for (let key in res.data.data) {
            //     list.push({
            //         name: key,
            //         list: res.data.data[key],
            //     });
            // }
            let list = [
                {
                    name: "星沙",
                    list: res.data.data["星沙"],
                },
                {
                    name: "城北",
                    list: res.data.data["城北"],
                },
                {
                    name: "城南",
                    list: res.data.data["城南"],
                },
                {
                    name: "城西",
                    list: res.data.data["城西"],
                },
            ];
            let chartList = [];
            let targetMax = 0;
            let actualMax = 0;
            list[0].list.forEach((item) => {
                console.log(item.targetWate);
                targetMax = targetMax + parseInt(item.targetWater);
                actualMax = actualMax + parseInt(item.actualWater);
            });

            let len = list[0].list.length;
            let legArr = [];
            let colorArr = [];
            let seriesArr = [];
            for (let i = 0; i <= len - 1; i++) {
                legArr.push(i + 1 + "月");
                colorArr.push(colorList.value[i]);
                seriesArr.push(i + 1 + "月(目标值)");
            }
            for (let i = 0; i <= len - 1; i++) {
                seriesArr.push(i + 1 + "月(实际值)");
            }
            currentColorList.value = colorArr.concat(colorArr);
            seriesDataList.value = seriesArr;
            console.log("======", currentColorList, seriesDataList);
            legendList.value = legArr;

            list.forEach((item, index) => {
                let chartObj = {};
                chartObj.name = item.name.replace("分", " ");
                item.list.forEach((t, n) => {
                    chartObj[t.month + "月(目标值)"] = t.targetWater;
                    chartObj[t.month + "月(实际值)"] = t.actualWater;
                });
                chartList.push(chartObj);
            });
            console.log(targetMax, actualMax);
            console.log(list, chartList);
            chartMax.value = targetMax > actualMax ? targetMax : actualMax;
            chartDataList.value = chartList;
            nextTick(() => {
                chartCompletionStatus.value.getChartData();
            });
        }
    });
};
</script>

<style scoped lang="less">
.chartContian {
    position: relative;

    .total {
        width: 100%;
        z-index: 10000;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: absolute;
        top: 25rem;

        .precent {
            width: 88%;
        }
    }
}

.xlabelName {
    width: 100%;
    box-sizing: border-box;
    padding-left: 10%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .labelItem {
        display: flex;
        flex-direction: row;
        justify-content: center;

        span {
            display: inline-block;
            width: 14rem;
            font-size: 12rem;
            color: #7190b6;
            margin: 0 5rem;
        }
    }
}

.legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10rem;

    p {
        color: #7190b6;
        margin-right: 2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 12rem;

        span {
            display: inline-block;
            width: 12rem;
            height: 12rem;
            border-radius: 6rem;
            margin-right: 6rem;
            margin-bottom: 4rem;
        }
    }
}
</style>
